<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=7UDjqYsQRJNq1H2TQLC28MqiWz7C1S58"></script>
    <title>百度地图轨迹标记</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    
    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36CFC9',
                        success: '#52C41A',
                        warning: '#FAAD14',
                        danger: '#FF4D4F',
                        neutral: {
                            100: '#F5F7FA',
                            200: '#E5E6EB',
                            300: '#C9CDD4',
                            400: '#86909C',
                            500: '#4E5969',
                            600: '#272E3B',
                            700: '#1D2129',
                        }
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                    boxShadow: {
                        'card': '0 4px 20px rgba(0, 0, 0, 0.08)',
                        'card-hover': '0 8px 30px rgba(0, 0, 0, 0.12)',
                    }
                },
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .transition-all-300 {
                transition: all 0.3s ease;
            }
            .input-focus {
                @apply focus:ring-2 focus:ring-primary/50 focus:border-primary;
            }
            .btn-primary {
                @apply bg-primary hover:bg-primary/90 text-white font-medium rounded-lg shadow-md hover:shadow-lg transition-all duration-300 flex items-center justify-center;
            }
            .btn-secondary {
                @apply bg-white border border-neutral-200 hover:border-primary hover:text-primary font-medium rounded-lg shadow-sm hover:shadow-md transition-all duration-300 flex items-center justify-center;
            }
            .card {
                @apply bg-white rounded-xl shadow-card hover:shadow-card-hover transition-all duration-300 overflow-hidden;
            }
        }
    </style>
    
    <style>
        body {
            font-family: 'Inter', sans-serif;
            background-color: #F7F8FA;
        }
        
        #container {
            height: 600px;
            border-radius: 16px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            position: relative;
            overflow: hidden;
        }
        
        /* 自定义滚动条 */
        .custom-scrollbar::-webkit-scrollbar {
            width: 6px;
        }
        
        .custom-scrollbar::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 10px;
        }
        
        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: #c1c1c1;
            border-radius: 10px;
        }
        
        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
            background: #a8a8a8;
        }
        
        /* 点标记动画 */
        .point-marker {
            transition: transform 0.3s ease;
        }
        
        .point-marker:hover {
            transform: scale(1.1);
        }

        /* 加载指示器 */
        .loader-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.8);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 100;
            transition: opacity 0.5s ease;
        }
        
        .loader-spinner {
            border: 4px solid rgba(22, 93, 255, 0.3);
            border-radius: 50%;
            border-top: 4px solid #165DFF;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
            margin-bottom: 16px;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
</head>
<body class="min-h-screen">
    <div class="container mx-auto px-4 py-8 max-w-6xl">
        <!-- 页面标题 -->
        <div class="mb-8 text-center">
            <h1 class="text-[clamp(1.75rem,3vw,2.5rem)] font-bold text-neutral-700 mb-2">百度地图轨迹标记</h1>
            <p class="text-neutral-500 max-w-2xl mx-auto">通过简单的经纬度输入，在地图上标记轨迹点并查看路线</p>
        </div>
        
        <!-- 主内容区 -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <!-- 地图区域 -->
            <div class="lg:col-span-2">
                <div class="card h-full">
                    <div id="container" class="w-full h-full">
                        <!-- 加载指示器 -->
                        <div id="mapLoader" class="loader-overlay">
                            <div class="loader-spinner"></div>
                            <p class="text-neutral-600 font-medium">地图加载中，请稍候...</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 控制面板 -->
            <div class="space-y-6">
                <!-- 输入区域 -->
                <div class="card p-6">
                    <h2 class="text-lg font-semibold text-neutral-700 mb-4 flex items-center">
                        <i class="fa fa-map-marker text-primary mr-2"></i>添加轨迹点
                    </h2>
                    
                    <form id="pointForm" class="space-y-4">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label for="longitude" class="block text-sm font-medium text-neutral-600 mb-1">经度</label>
                                <div class="relative">
                                    <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-neutral-400">
                                        <i class="fa fa-long-arrow-right"></i>
                                    </span>
                                    <input type="text" id="longitude" 
                                        class="w-full pl-10 pr-3 py-2 border border-neutral-200 rounded-lg input-focus transition-all duration-300" 
                                        placeholder="例如: 116.404">
                                </div>
                            </div>
                            
                            <div>
                                <label for="latitude" class="block text-sm font-medium text-neutral-600 mb-1">纬度</label>
                                <div class="relative">
                                    <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-neutral-400">
                                        <i class="fa fa-long-arrow-down"></i>
                                    </span>
                                    <input type="text" id="latitude" 
                                        class="w-full pl-10 pr-3 py-2 border border-neutral-200 rounded-lg input-focus transition-all duration-300" 
                                        placeholder="例如: 39.915">
                                </div>
                            </div>
                        </div>
                        
                        <button type="button" id="addPoint" class="btn-primary py-2.5">
                            <i class="fa fa-plus-circle mr-2"></i>添加点
                        </button>
                    </form>
                </div>
                
                <!-- 已添加的点列表 -->
                <div class="card p-6">
                    <div class="flex justify-between items-center mb-4">
                        <h2 class="text-lg font-semibold text-neutral-700 flex items-center">
                            <i class="fa fa-list-ul text-primary mr-2"></i>已添加的点
                        </h2>
                        <span id="pointCount" class="text-sm bg-primary/10 text-primary px-2 py-1 rounded-full">0 个点</span>
                    </div>
                    
                    <div id="pointList" class="max-h-64 overflow-y-auto custom-scrollbar space-y-2 text-sm">
                        <div class="text-neutral-400 text-center py-8">
                            <i class="fa fa-map-o text-3xl mb-2 block"></i>
                            <p>暂无标记点，请添加点以显示轨迹</p>
                        </div>
                    </div>
                    
                    <div class="mt-4 flex space-x-3">
                        <button id="clearPoints" class="btn-secondary flex-1 py-2.5 text-danger hover:bg-danger/5">
                            <i class="fa fa-trash mr-2"></i>清空所有点
                        </button>
                        <button id="locateAll" class="btn-primary flex-1 py-2.5">
                            <i class="fa fa-crosshairs mr-2"></i>调整视图
                        </button>
                    </div>
                </div>
                
                <!-- 使用说明 -->
                <div class="card p-6 bg-primary/5 border border-primary/10">
                    <h3 class="text-base font-semibold text-primary mb-3 flex items-center">
                        <i class="fa fa-info-circle mr-2"></i>使用说明
                    </h3>
                    <ul class="space-y-2 text-sm text-neutral-600">
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-primary mt-0.5 mr-2"></i>
                            <span>输入经纬度后点击"添加点"按钮添加轨迹点</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-primary mt-0.5 mr-2"></i>
                            <span>点击列表中的点可以在地图上查看详情</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-primary mt-0.5 mr-2"></i>
                            <span>点击"调整视图"按钮可以自动缩放地图以显示所有点</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-primary mt-0.5 mr-2"></i>
                            <span>点击点标记可以查看详细的经纬度信息</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        
        <!-- 页脚 -->
        <footer class="mt-12 text-center text-neutral-500 text-sm">
            <p>© 2023 百度地图轨迹标记工具 | 使用百度地图API v1.0</p>
        </footer>
    </div>

    <script>
        // 确保DOM加载完成后执行
        document.addEventListener('DOMContentLoaded', function() {
            // 显示加载指示器
            const mapLoader = document.getElementById('mapLoader');
            
            // 创建地图实例
            var map = new BMapGL.Map("container");
            var point = new BMapGL.Point(116.404, 39.915);
            
            // 地图加载完成后隐藏加载指示器
            map.addEventListener('tilesloaded', function() {
                // 淡出效果
                mapLoader.style.opacity = '0';
                setTimeout(() => {
                    mapLoader.style.display = 'none';
                }, 500);
            });
            
            map.centerAndZoom(point, 15);
            map.enableScrollWheelZoom();
            
            // 存储所有点和折线对象
            var points = [];
            var polyline = null;
            var markers = [];
            
            // 添加点的函数
            document.getElementById("addPoint").addEventListener("click", function() {
                var lng = parseFloat(document.getElementById("longitude").value);
                var lat = parseFloat(document.getElementById("latitude").value);
                
                // 验证输入
                if (isNaN(lng) || isNaN(lat) || lng < -180 || lng > 180 || lat < -90 || lat > 90) {
                    showNotification("请输入有效的经纬度值！\n经度范围：-180 到 180\n纬度范围：-90 到 90", "error");
                    return;
                }
                
                // 创建点并添加到地图
                var point = new BMapGL.Point(lng, lat);
                points.push(point);
                
                // 添加标记
                addMarker(point, points.length);
                
                // 更新点列表
                updatePointList();
                
                // 更新折线
                updatePolyline();
                
                // 清空输入框
                document.getElementById("longitude").value = "";
                document.getElementById("latitude").value = "";
                
                // 聚焦到经度输入框
                document.getElementById("longitude").focus();
                
                // 显示成功通知
                showNotification(`成功添加点 #${points.length} (${lng.toFixed(6)}, ${lat.toFixed(6)})`, "success");
            });
            
            // 添加标记
            function addMarker(point, index) {
                // 创建自定义图标
                var icon = new BMapGL.Icon(
                    "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Ccircle cx='12' cy='12' r='8' fill='%23165DFF' fill-opacity='0.8' stroke='white' stroke-width='2'/%3E%3Ccircle cx='12' cy='12' r='4' fill='white'/%3E%3C/svg%3E",
                    new BMapGL.Size(24, 24),
                    {
                        anchor: new BMapGL.Size(12, 12),
                        imageSize: new BMapGL.Size(24, 24)
                    }
                );
                
                var marker = new BMapGL.Marker(point, {icon: icon});
                marker.setAnimation(BMAP_ANIMATION_DROP); // 添加动画效果
                map.addOverlay(marker);
                markers.push(marker);
                
                // 添加点击事件
                marker.addEventListener('click', function() {
                    var infoWindow = new BMapGL.InfoWindow(
                        `<div class="text-neutral-700">
                            <div class="font-semibold mb-1">位置 #${index}</div>
                            <div class="text-sm">经度: ${point.lng.toFixed(6)}</div>
                            <div class="text-sm">纬度: ${point.lat.toFixed(6)}</div>
                        </div>`,
                        {width: 200}
                    );
                    map.openInfoWindow(infoWindow, point);
                });
            }
            
            // 更新点列表
            function updatePointList() {
                var listElement = document.getElementById("pointList");
                
                if (points.length === 0) {
                    listElement.innerHTML = `
                        <div class="text-neutral-400 text-center py-8">
                            <i class="fa fa-map-o text-3xl mb-2 block"></i>
                            <p>暂无标记点，请添加点以显示轨迹</p>
                        </div>
                    `;
                    document.getElementById("pointCount").textContent = "0 个点";
                    return;
                }
                
                listElement.innerHTML = "";
                
                points.forEach((point, index) => {
                    var item = document.createElement("div");
                    item.className = "bg-white border border-neutral-100 rounded-lg p-3 shadow-sm hover:shadow transition-all duration-300 flex justify-between items-center point-item";
                    item.innerHTML = `
                        <div class="flex items-center">
                            <div class="w-8 h-8 rounded-full bg-primary/10 text-primary flex items-center justify-center font-medium mr-3">
                                ${index + 1}
                            </div>
                            <div>
                                <div class="font-medium text-neutral-700">位置 #${index + 1}</div>
                                <div class="text-sm text-neutral-500">${point.lng.toFixed(6)}, ${point.lat.toFixed(6)}</div>
                            </div>
                        </div>
                        <button class="delete-point text-neutral-400 hover:text-danger transition-colors duration-300" data-index="${index}">
                            <i class="fa fa-times-circle text-lg"></i>
                        </button>
                    `;
                    listElement.appendChild(item);
                    
                    // 为点项添加点击事件
                    item.addEventListener('click', function(e) {
                        if (!e.target.closest('.delete-point')) {
                            // 触发标记的点击事件
                            markers[index].dispatchEvent('click');
                            
                            // 高亮当前点
                            document.querySelectorAll('.point-item').forEach(el => {
                                el.classList.remove('border-primary', 'bg-primary/5');
                            });
                            item.classList.add('border-primary', 'bg-primary/5');
                        }
                    });
                });
                
                // 更新点计数
                document.getElementById("pointCount").textContent = `${points.length} 个点`;
                
                // 添加删除事件
                document.querySelectorAll('.delete-point').forEach(button => {
                    button.addEventListener('click', function(e) {
                        e.stopPropagation(); // 防止触发点项的点击事件
                        var index = parseInt(this.getAttribute('data-index'));
                        deletePoint(index);
                    });
                });
            }
            
            // 删除点
            function deletePoint(index) {
                // 移除标记
                map.removeOverlay(markers[index]);
                markers.splice(index, 1);
                
                // 移除点
                points.splice(index, 1);
                
                // 更新点列表
                updatePointList();
                
                // 更新折线
                updatePolyline();
                
                // 显示删除通知
                showNotification(`已删除点 #${index + 1}`, "info");
            }
            
            // 更新折线
            function updatePolyline() {
                // 移除旧折线
                if (polyline) {
                    map.removeOverlay(polyline);
                }
                
                // 创建新折线
                if (points.length >= 2) {
                    polyline = new BMapGL.Polyline(points, {
                        strokeColor: "#165DFF",
                        strokeWeight: 4,
                        strokeOpacity: 0.8,
                        strokeStyle: "solid",
                        enableEditing: false
                    });
                    map.addOverlay(polyline);
                }
            }
            
            // 清空所有点
            document.getElementById("clearPoints").addEventListener("click", function() {
                if (points.length === 0) return;
                
                if (confirm("确定要清空所有标记点吗？")) {
                    // 移除所有标记和折线
                    markers.forEach(marker => map.removeOverlay(marker));
                    if (polyline) map.removeOverlay(polyline);
                    
                    // 清空数组
                    points = [];
                    markers = [];
                    polyline = null;
                    
                    // 更新点列表
                    updatePointList();
                    
                    // 显示清空通知
                    showNotification("已清空所有标记点", "info");
                }
            });
            
            // 调整视图以显示所有点
            document.getElementById("locateAll").addEventListener("click", function() {
                if (points.length === 0) {
                    showNotification("请先添加点！", "warning");
                    return;
                }
                
                // 创建包含所有点的视野
                var viewport = map.getViewport(points);
                map.setViewport(viewport);
                
                // 显示通知
                showNotification("已调整视图以显示所有点", "success");
            });
            
            // 支持按Enter键添加点
            document.getElementById("latitude").addEventListener("keypress", function(e) {
                if (e.key === "Enter") {
                    document.getElementById("addPoint").click();
                }
            });
            
            // 初始示例点
            document.getElementById("longitude").value = "116.404";
            document.getElementById("latitude").value = "39.915";
            
            // 通知函数
            function showNotification(message, type = "info") {
                // 创建通知容器（如果不存在）
                let notificationContainer = document.getElementById('notification-container');
                if (!notificationContainer) {
                    notificationContainer = document.createElement('div');
                    notificationContainer.id = 'notification-container';
                    notificationContainer.className = 'fixed top-4 right-4 z-50 flex flex-col space-y-3';
                    document.body.appendChild(notificationContainer);
                }
                
                // 创建通知元素
                const notification = document.createElement('div');
                notification.className = `flex items-center p-4 rounded-lg shadow-lg transform transition-all duration-300 translate-y-0 opacity-0 ${
                    type === 'success' ? 'bg-success text-white' : 
                    type === 'error' ? 'bg-danger text-white' : 
                    type === 'warning' ? 'bg-warning text-white' : 
                    'bg-primary text-white'
                }`;
                
                // 设置图标
                const iconClass = 
                    type === 'success' ? 'fa-check-circle' : 
                    type === 'error' ? 'fa-exclamation-circle' : 
                    type === 'warning' ? 'fa-exclamation-triangle' : 
                    'fa-info-circle';
                
                notification.innerHTML = `
                    <i class="fa ${iconClass} mr-3 text-lg"></i>
                    <span>${message}</span>
                `;
                
                // 添加到容器
                notificationContainer.appendChild(notification);
                
                // 触发动画
                setTimeout(() => {
                    notification.classList.remove('opacity-0', 'translate-y-0');
                    notification.classList.add('opacity-100', 'translate-y-0');
                }, 10);
                
                // 自动关闭
                setTimeout(() => {
                    notification.classList.remove('opacity-100', 'translate-y-0');
                    notification.classList.add('opacity-0', 'translate-y-[-20px]');
                    
                    setTimeout(() => {
                        notification.remove();
                        
                        // 如果容器为空，移除容器
                        if (notificationContainer.children.length === 0) {
                            notificationContainer.remove();
                        }
                    }, 300);
                }, 3000);
            }
        });
    </script>
</body>
</html>